<template>
  <div class="base-table">
    <el-table :data="tableData" size="mini">
      <el-table-column
        :width="item.name === 'OFFERING_TIME' ? '160' : ''"
        :show-overflow-tooltip="true"
        v-for="(item, index) in options"
        :key="index"
        v-if="item.show === true"
        :prop="item.name"
        :label="item.displayname">
        <template scope="scope">
            <div v-if="item.name=='REPEAT_CALL'">
              <p v-if="scope.row[item.name]">{{scope.row[item.name]=='24h'?$t('call.repeatCall24hNum'):$t('call.repeatCall48hNum')}}</p>
            </div>
            <div v-else>
              <p>{{scope.row[item.name]}}</p>
            </div>
        </template>
      </el-table-column>
      <el-table-column  :label="$t('public.operate')" width="130">
        <template scope="scope2">
          <el-button @click="grade(scope2.row)" type="text" size="small">{{$t('qualityCheck.grade')}}</el-button>
          <el-button type="text" @click="viewLook(scope2.row._id)" size="small" >{{$t('qualityCheck.viewLook')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    name: 'BaseTable',
    data () {
      return {
      }
    },
    props: {
      tableData: {
        type: Array,
        default: function () {
          return []
        }
      },
      options: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    methods: {
      grade (val) {
        this.$emit('grade', val)
      },
      viewLook (val) {
        this.$emit('viewLook', val)
      }
    }
  }
</script>
<style lang="stylus" scoped>
</style>
